<template>
	<div class="container">
		<input type="text" class="search" placeholder="搜索">
	</div>
	<view class="y" style="flex-wrap: wrap;">
		<view style="width: 20vw;align-items: center;justify-content: center;" class="x" v-for="tt in sun">
			<image style="width: 20px;height: 20px;margin-bottom: 16px;margin: 12px;" :src="tt.pic"></image>
			<view>{{tt.cateName}}</view>
			<!-- <view>{{tt.pic}}</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sun:[],
			}
		},
		onLoad() {
			uni.request({
				url: 'https://h5.kxmall.vip/prod-api/product/app/categoryList', //仅为示例，并非真实接口地址。
		
				success: (res) => {
					console.log(res)
					// this.sun = res.data.data.categoryList
					
				}
			});
		},
		methods: {

		}
	}
</script>

<style>
	/* 搜索框 */
	.container {
		background-color: #9e0000;
		padding: 8px 10px;
	}
	.search {
		height: 36px;
		border-radius: 18px;
		/* outline: none; */
		border: 1px solid #ccc;
		padding-left: 20px;
		/* position: absolute; */
		background-color: #fff;
	}
	/* 侧边栏 */
	.x {
		display: flex;
		flex-direction: row;
	}

	.y {
		display: flex;
		flex-direction: column;
	}
</style>